<script>
export default {
  name: 'ArticlePage'  // 使用多单词名称
}
</script>
<template>
  <div class="sociala-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="brand-section">
        <h1 class="brand-name">Sociala.</h1>
        <el-input
            placeholder="Start typing to search..."
            class="search-input"
            size="large"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>'
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 左侧导航 -->
      <el-aside width="240px" class="left-aside">
        <el-menu class="side-menu" :default-active="activeNav">
          <el-menu-item index="badges">
            <el-icon><Medal /></el-icon>
            <span>Badges</span>
          </el-menu-item>
          <el-menu-item index="stories">
            <el-icon><View /></el-icon>
            <span>Explore Stories</span>
          </el-menu-item>
          <el-menu-item index="groups">
            <el-icon><UserFilled /></el-icon>
            <span>Popular Groups</span>
          </el-menu-item>
          <el-menu-item index="profile">
            <el-icon><User /></el-icon>
            <span>Author Profile</span>
          </el-menu-item>
          <el-menu-item index="pages">
            <el-icon><Notebook /></el-icon>
            <span>More Pages</span>
          </el-menu-item>

          <el-divider />

          <el-menu-item index="email">
            <el-icon><Message /></el-icon>
            <span>Email Box</span>
            <el-tag class="notification-tag">584</el-tag>
          </el-menu-item>
          <el-menu-item index="event">
            <el-icon><Calendar /></el-icon>
            <span>Near Hotel</span>
          </el-menu-item>
          <el-menu-item index="stream">
            <el-icon><VideoCamera /></el-icon>
            <span>Live Stream</span>
          </el-menu-item>
        </el-menu>

        <div class="bottom-menu">
          <el-menu>
            <el-menu-item index="account">
              <el-icon><User /></el-icon>
              <span>Account</span>
            </el-menu-item>
            <el-menu-item index="settings">
              <el-icon><Setting /></el-icon>
              <span>Settings</span>
            </el-menu-item>
            <el-menu-item index="analytics">
              <el-icon><DataAnalysis /></el-icon>
              <span>Analytics</span>
            </el-menu-item>
            <el-menu-item index="chat">
              <el-icon><ChatDotRound /></el-icon>
              <span>Chat</span>
              <el-tag class="notification-tag">23</el-tag>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="center-main">
        <!-- 故事区域 -->
        <div class="stories-section">
          <div class="story-card">
            <el-avatar :size="64" class="story-avatar">
              <el-icon><Plus /></el-icon>
            </el-avatar>
            <span class="story-label">Add Story</span>
          </div>

          <div v-for="(user, index) in storyUsers" :key="index" class="story-card">
            <el-avatar :size="64" :src="user.avatar" />
            <span class="story-label">{{ user.name }}</span>
          </div>
        </div>

        <!-- 创建帖子区域 -->
        <el-card class="create-post">
          <h3>Create Post</h3>
          <el-input
              type="textarea"
              :rows="3"
              placeholder="What's on your mind?"
              resize="none"
          ></el-input>

          <div class="post-actions">
            <el-button type="primary" plain>
              <el-icon><Picture /></el-icon> Photo/Video
            </el-button>
            <el-button type="primary" plain>
              <el-icon><VideoCamera /></el-icon> Live Video
            </el-button>
            <el-button type="primary" plain>
              <el-icon><Avatar /></el-icon> Feelng/Activity
            </el-button>
          </div>
        </el-card>

        <!-- 帖子展示区域 -->
        <el-card class="post-card">
          <div class="post-header">
            <el-avatar :size="36" src="avatar-placeholder.jpg" />
            <div class="post-user">
              <strong>Surfiya Zakir</strong>
              <p>3 hours ago</p>
            </div>
          </div>
          <div class="post-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at fe commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus.</p>
            <el-link type="primary">See more</el-link>
          </div>
        </el-card>
      </el-main>

      <!-- 右侧边栏 -->
      <el-aside width="280px" class="right-aside">
        <h3 class="section-title">Friend Requests</h3>
        <div v-for="(request, index) in friendRequests" :key="index" class="friend-request">
          <el-avatar :size="40" :src="request.avatar" />
          <div class="request-info">
            <strong>{{ request.name }}</strong>
            <p>{{ request.mutualFriends }} mutual friends</p>
          </div>
          <div class="request-actions">
            <el-button type="success" circle size="small">
              <el-icon><Check /></el-icon>
            </el-button>
            <el-button type="danger" circle size="small">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>

        <el-divider />

        <h3 class="section-title">Confirm Friend List</h3>
        <div v-for="(friend, index) in friendList" :key="index" class="friend-item">
          <el-avatar :size="36" :src="friend.avatar" />
          <span>{{ friend.name }}</span>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Search, Medal, View, UserFilled, User, Notebook,
  Message, Calendar, VideoCamera, Setting, DataAnalysis,
  ChatDotRound, Plus, Picture, Avatar, Check, Close
} from '@element-plus/icons-vue';

// 示例数据
const activeNav = ref('stories');
const storyUsers = ref([
  { name: 'Victor Exrixon', avatar: '' },
  { name: 'Goria Coast', avatar: '' },
  { name: 'Hurlin Seary', avatar: '' }
]);
const friendRequests = ref([
  { name: 'Alex Johnson', mutualFriends: 12, avatar: '' },
  { name: 'Taylor Swift', mutualFriends: 8, avatar: '' }
]);
const friendList = ref([
  { name: 'Emily Chen', avatar: '' },
  { name: 'Mike Peterson', avatar: '' }
]);
</script>

<style scoped>
.sociala-container {
  height: 100vh;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: white;
  border-bottom: 1px solid #e4e6eb;
  height: 64px;
  display: flex;
  align-items: center;
}

.brand-section {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 24px;
}

.brand-name {
  color: #1877f2;
  font-size: 32px;
  margin-right: 20px;
}

.search-input {
  width: 240px;
}

.main-container {
  height: calc(100vh - 64px);
}

.left-aside {
  background-color: white;
  border-right: 1px solid #e4e6eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side-menu, .bottom-menu {
  border-right: none;
}

.notification-tag {
  margin-left: auto;
}

.center-main {
  padding: 16px 24px;
  overflow-y: auto;
}

.stories-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding: 8px 0;
}

.story-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  cursor: pointer;
}

.story-card .el-avatar {
  margin-bottom: 8px;
  border: 2px solid #e1306c;
  padding: 2px;
}

.story-label {
  font-size: 12px;
  text-align: center;
}

.create-post, .post-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.post-actions {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.post-user {
  margin-left: 12px;
}

.post-user p {
  margin: 0;
  font-size: 12px;
  color: #606266;
}

.post-content {
  font-size: 15px;
  line-height: 1.5;
}

.right-aside {
  background-color: white;
  border-left: 1px solid #e4e6eb;
  padding: 16px;
  overflow-y: auto;
}

.section-title {
  margin-top: 0;
  font-size: 18px;
}

.friend-request {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e4e6eb;
}

.request-info {
  margin-left: 12px;
  flex-grow: 1;
}

.request-info p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #909399;
}

.request-actions {
  display: flex;
  gap: 8px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.friend-item .el-avatar {
  margin-right: 12px;
}
</style>